<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用法示例</title>
</head>
<body>
    <div>
        <img src='d3.jpeg' style="width: 0;height: 0;">
    </div>
    <div class="container">
        <img src="d1.jpeg">
        <img src="d2.jpeg">
        <a href="http://www.htmleaf.com/jQuery/Image-Effects/201503141520.html">用法介绍</a>
    </div>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="imagesloaded.pkgd.min.js"></script>
    <script>
        $('.container').imagesLoaded()
        .always(function(instance) {
            console.log('all images loaded');
        })
        .done(function(instance) {
            console.log('all images successfully loaded');
        })
        .fail(function() {
            console.log('all images loaded, at least one is broken');
        })
        .progress(function(instance, image) {
            var result = image.isLoaded ? 'loaded' : 'broken';
            console.log('image is ' + result + ' for ' + image.img.src);
        });
    </script>
</body>
</html>